<template>
  <div>
    <div>{{ count }}</div>
    <input ref="xxx" type="text" />
  </div>
</template>

<script>
/*
  学习目标：了解常用-钩子函数 -使用场景
*/
export default {
  data() {
    return {
      count: 0,
    };
  },
  beforeCreate() {
    console.log("beforeCreate  ----->  ", this.count);
  },
  // 💥💥 created
  // 代表：创建后，Vue成功创建数据
  // 场景: 发请求
  created() {
    console.log("  ----->  ", 123);
    console.log("创建后  ----->  ", this.count);
    this.$refs.xxx.focus(); // 只创建了数据，还没有渲染dom到浏览器中
  },

  // 无法获取dom，还没有渲染
  beforeMount() {
    this.$refs.xxx.focus(); // 准备渲染，还没有渲染dom到浏览器中
  },

  // 💥💥 mounted
  // 代表：渲染后，👍最先获取dom
  // 场景：立即操作dom
  mounted() {
    console.log("渲染后  ----->  ", this.$refs.xxx);
    this.$refs.xxx.focus();
  },
};
</script>

<style></style>
